<script setup lang="ts">
import Appearance from './components/appearance.vue';
import Layout from './components/layout.vue';
import General from './components/general.vue';

defineOptions({
  name: 'AppSettings',
});

const props = withDefaults(defineProps<AppSettingsProps>(), {
  title: '偏好配置',
  width: 400,
});

interface AppSettingsProps {
  /**
   * 抽屉标题
   */
  title?: string;
  /**
   * 抽屉宽度
   */
  width?: number;
}

const showDrawer = ref(false);

function openDrawer() {
  showDrawer.value = true;
}

function closeDrawer() {
  showDrawer.value = false;
}

defineExpose({
  openDrawer,
  closeDrawer,
});
</script>

<template>
  <NDrawer v-model:show="showDrawer" :width="props.width" placement="right">
    <NDrawerContent :title="props.title" :native-scrollbar="false" closable>
      <NTabs type="segment" animated>
        <NTabPane name="appearance" tab="外观">
          <Appearance />
        </NTabPane>
        <NTabPane name="layout" tab="布局">
          <Layout />
        </NTabPane>
        <NTabPane name="general" tab="通用">
          <General />
        </NTabPane>
      </NTabs>
    </NDrawerContent>
  </NDrawer>
</template>

<style scoped lang="less">

</style>
